<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragment::head(title='关于我')}"}>

</head>
<body>


<!--导航-->
<nav class="ui inverted attached segment" th:replace="~{fragment::nav(n=5)}">

</nav>


<!--中间内容-->
<div class="ui container m-padded-tb-massive">
    <div class="ui grid stackable">
        <div class="eleven wide column">
            <img class="ui huge image rounded" th:src="@{/images/panda.png}"} alt="">
        </div>

        <div class="five wide column">
            <div class="ui segment top attached">
                关于我
            </div>

            <div class="ui segment attached">
                <p>
                    want
                </p>
                <p>
                    啥也不是
                </p>
            </div>

            <div class="ui segment attached">
                <p>专业</p>
                <label class="ui orange label">van</label>
                <label class="ui orange label">van</label>
                <label  class="ui orange label">van</label>
                <label  class="ui orange label">van</label>
            </div>

            <div class="ui segment attached">
                <p>兴趣</p>
                <label class="ui orange label">van</label>
                <label class="ui orange label">van</label>
                <label class="ui orange label">van</label>
                <label class="ui orange label">van</label>
            </div>

            <div class="ui segment attached">
                <a href="https://www.baidu.com" target="_blank" class="ui circular icon button"><i class="icon github"></i></a>
                <a href="javascript:void(0)" class="wechat ui circular icon button"><i class="icon weixin"></i></a>
                <a href="javascript:void(0)" class="qq ui circular icon button" data-content="2846406663"><i class="icon qq"></i></a>
            </div>

            <div class="ui popup transition hidden" id="pay">
                <div class="ui images" style="font-size: inherit !important; width: 100px">
                    <div class="ui image">
                        <img class="ui rounded image" th:src="@{/images/weichat.png}">
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>


    <!--底部的内容-->

    <footer class="ui inverted vertical segment" th:replace="~{fragment::footer}">
    </footer>

    <th:block th:replace="~{fragment :: script}">
    </th:block>

<script type="text/javascript">
    $('.wechat').popup({
        popup:$('#pay'),
        on:'click',
        position:'bottom center',
    });

    $('.qq').popup({
        on:'click',
        position:'bottom center',
    });
</script>
</body>
</html>